<template>
  <div class="menu-container">
    <a-menu
      mode="inline"
      v-model:selectedKeys="menu"
      v-model:openKeys="openMenu"
      @click="handleClick"
      @openChange="handleOpenChange"
      class="main-page-menu"
    >
      <template v-for="(item, i) in menuList" :key="i">
        <a-menu-item v-if="!item.children" :key="item.key">
          <template #icon v-if="item.icon">
            <component v-if="isAntdIcon(item.icon)" :is="$antIcons[item.icon]" />
            <icon-font-cn v-else :type="item.icon"></icon-font-cn>
          </template>
          {{ item.label }}
        </a-menu-item>
        <a-sub-menu v-else :key="item.key" :children="item.children">
          <template #icon v-if="item.icon">
            <component v-if="isAntdIcon(item.icon)" :is="$antIcons[item.icon]" />
            <icon-font-cn v-else :type="item.icon"></icon-font-cn>
          </template>
          <template #title>
            <span>{{ item.label }}</span>
          </template>
          <submenu
            v-for="item in item.children"
            :key="item.key"
            :menuInfo="item"
            :isAntdIcon="isAntdIcon"
          />
        </a-sub-menu>
      </template>
    </a-menu>
    <img :src="!props.isCollapse ? menuClose : menuOpen" class="menu-btn" @click="setCollapsed" />
  </div>
</template>

<script setup>
import { ref, watch, getCurrentInstance } from 'vue'
import { menuList } from '@/config/router.js'
import router from '@/router'
import menuClose from '@/assets/menu-close.png'
import menuOpen from '@/assets/menu-open.png'
import submenu from './submenu.vue'

const props = defineProps({
  isCollapse: Boolean
})

const emits = defineEmits(['setCollapse'])

const { proxy } = getCurrentInstance()
const menu = ref([])
const openMenu = ref([])

const findOpenMenu = () => {
  function find(menu, key, path = []) {
    for (let item of menu) {
      path.push(item.key)

      if (item.key === key) {
        return path.slice()
      }

      if (item.children && item.children.length > 0) {
        const result = find(item.children, key, path)
        if (result) {
          return result
        }
      }
      path.pop()
    }
    return null
  }
  openMenu.value = find(menuList, menu.value[0], [])
}

watch(
  () => proxy.$route,
  (newValue) => {
    menu.value = [newValue.path]
    findOpenMenu()
  },
  { immediate: true }
)

const handleClick = (e) => {
  console.log(e)
  if (e.key) {
    router.push(e.key)
    menu.value = [e.key]
  }
}

const handleOpenChange = (e) => {
  openMenu.value = e
}

const setCollapsed = () => {
  emits('setCollapse')
}

const isAntdIcon = (str) => {
  if (!str) return false
  if (proxy.$antIcons[str]) {
    return true
  } else {
    return false
  }
}
</script>

<style scoped lang="scss">
.menu-container {
  position: relative;
  height: 100%;
  .menu-btn {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    cursor: pointer;
  }
  .main-page-menu {
    height: 100%;
    overflow-y: auto;
    background: transparent;
  }
  .main-page-menu::-webkit-scrollbar {
    display: none;
  }
}
</style>